<template>
  <div class="tabs">
    tabs：
    <RouterLink
      class="router_btn"
      v-for="item in routers"
      :key="item.path"
      :to="item.path"
    >
      {{ item.name }}
    </RouterLink>
  </div>
  <hr />
  <div class="container">
    <RouterView />
  </div>
  <!-- <Layout></Layout> -->
</template>
<script setup lang="ts">
import { getCurrentInstance } from "vue";
import { RouterView, RouterLink } from "vue-router";
import router from "./router";
// import Layout from "./Layout/index.vue";
const routers = router.getRoutes();
const instance = getCurrentInstance();
instance?.proxy?.$loading.show();
setTimeout(() => {
  instance?.proxy?.$loading?.show()
}, 2000);
</script>
<style lang="scss">
.router_btn,
.tabs {
  overflow-x: auto;
  overflow: hidden;
  padding: 20px;
  background-color: rgb(0, 17, 255);
  color: #fff;
  white-space: nowrap;
}
#app {
  @include bfc;
}
.container {
  overflow-y: auto;
  height: 100%;
  padding: 20px;
  background-color: #cecece;
}
</style>
